<template>
  <div>
    <!-- 标签列表 -->
    <div class="label-list">
      <div
        v-for="label in labelList"
        :key="label.id"
        :class="['label-item', label.color]"
        @click="toggleColor(label)"
      >
        <div class="label-name">{{ label.name }}</div>
        <div class="label-actions">
          <el-button ref="colorPopover" type="text" @click="toggleColor(label)">
            <i class="el-icon-color"></i>
          </el-button>
          <el-button type="text" @click="showColorPicker(label)">
            <i class="el-icon-s-promotion"></i>
          </el-button>
          <el-button type="text" @click="deleteLabel(label)">
            <i class="el-icon-delete"></i>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 添加标签 -->
    <div class="add-label">
      <el-input v-model="newLabel" class="addBtn" placeholder="请输入标签名称"></el-input>
      <el-button type="primary" @click="addLabel">添加标签</el-button>
    </div>

    <!-- 颜色选择面板 -->
    <!-- <el-drawer
      :visible="showColorPanel"
      direction="rtl"
      title="颜色选择"
      @close="showColorPanel = false"
    >
      <el-color-picker v-model="selectedColor" size="large" class="colorBtn"></el-color-picker>
      <el-button type="primary" class="submitBtn" @click="applyColor">应用</el-button>
    </el-drawer> -->

    <el-dialog
      title="颜色选择"
      :visible.sync="showColorPanel"
      width="400px">
      <el-color-picker v-model="selectedColor" size="large" class="colorBtn"></el-color-picker>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="applyColor">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>
export default {
  name: "LabelManage",
  data() {
    return {
      labelList: [
        { id: 1, name: "spleen", color: "red" },
        { id: 2, name: "right kidney", color: "blue" },
        { id: 3, name: "left kidney", color: "green" },
        { id: 4, name: "gall bladder", color: "yellow" },
        { id: 5, name: "esophagus", color: "purple" },
        { id: 6, name: "liver", color: "orange" },
        { id: 7, name: "stomach", color: "cyan" },
        { id: 8, name: "aorta", color: "pink" },
        { id: 9, name: "postcava", color: "brown" },
        { id: 10, name: "pancreas", color: "teal" },
        { id: 11, name: "bladder", color: "gray" },
      ],
      newLabel: "",

      showColorPanel: false,
      selectedColor: "",
      selectedLabel: null,
    };
  },
  methods: {
    addLabel() {
      if (this.newLabel) {
        const newId = this.labelList.length + 1;
        const newLabel = { id: newId, name: this.newLabel, color: "red" };
        this.labelList.push(newLabel);
        this.newLabel = "";
      }
    },
    deleteLabel(label) {
      const index = this.labelList.findIndex((item) => item.id === label.id);
      if (index !== -1) {
        this.labelList.splice(index, 1);
      }
    },
    toggleColor(label) {
      const colors = ["red", "blue", "green", "yellow", "purple", "orange", "cyan", "pink", "brown", "teal", "gray"];
      const currentIndex = colors.findIndex((color) => color === label.color);
      const nextIndex = (currentIndex + 1) % colors.length;
      label.color = colors[nextIndex];
    },
    showColorPicker(label) {
      this.selectedLabel = label;
      this.selectedColor = label.color;
      this.showColorPanel = true;
    },
    applyColor() {
      if (this.selectedLabel) {
        this.selectedLabel.color = this.selectedColor;
        this.selectedLabel = null;
        this.showColorPanel = false;
      }
    },
  },
};
</script>

<style scoped lang="less">
.label-list {
  margin-bottom: 20px;
}

.label-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 4px;
  width: 200px;
  float: left;
  margin: 10px;
}

.label-name {
  flex: 1;
  text-align: center;
  font-weight: bold;
}

.label-actions {
  display: flex;
}

.add-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 210px;
  margin: 10px;
  float: left;
  .addBtn {
    /deep/ .el-input__inner{
      height:52px;
    }
  }
  .el-button--primary{
    height:52px;
  }
}

.el-drawer__body {
  padding: 20px;
  float: left;
  margin-left: 20px;
  .submitBtn{
    margin-left: 10px;
  }
}

.el-color-picker {
  margin-bottom: 20px;
  float: left;
}

.colorBtn {
  /deep/ .el-color-picker__trigger{
    width: 100px;
    height: 42px;
  }
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}
.orange {
  background-color: orange;
}
.cyan {
  background-color: cyan;
}
.pink {
  background-color: pink;
}
.brown {
  background-color: brown;
}
.teal {
  background-color: teal;
}
.gray {
  background-color: gray;
}
</style>
